<template>
	<view class="video_chat" v-show="videoModalShow">
		<image class="bg" src="@/static/img/voiceChatBg.png" mode=""></image>

		<view class="avater-box">
			<image class="avatar" :src="avatar || ''" mode=""></image>
			<text class="name">{{videoChatUser.nick || videoChatUser.nickname || ''}}</text>
		</view>

		<view class="leaveroom-content">
			<image @click="closePhone" class="leaveroom-btn" src="@/static/img/dianhua.png" mode=""></image>
			<image @click="answerPhone" class="leaveroom-btn" src="@/static/img/call.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				windowHeight: 0,
				windowWidth: 0,
				audio: null,
				avatar: null,
				userId:null
			}
		},
		computed: {
			...mapState(['videoModalShow', 'videoChatUser']),
		},
		watch: {
			videoModalShow(nval) {
				// console.log(nval)
				if (nval) {
					this.audio = uni.createInnerAudioContext()
					this.audio.src = './../../static/audio/voice_chat_tips.mp3'
					this.audio.autoplay = true
					this.audio.loop = true
					this.audio.play()
					if (this.videoChatUser.avatar) {
						this.avatar = this.videoChatUser.avatar.split(',')
						this.avatar = this.avatar.shift()
						this.avatar = this.avatar.replace(/\"/g, '')
					}
				} else {
					if (this.audio) {
						this.stopAudio()
					}
				}
			}
		},
		onShow(option) {
			let userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			this.userId = userInfo.id;
			this.addVideo()
		},
		onHide() {
			this.deleteVideo()
		},
		methods: {
			deleteVideo() {
				uni.$utils.postrequest("/api/delete_video", {
					user_id: this.userId
				}, res => {})
			},
			addVideo() {
				uni.$utils.postrequest("/api/add_video", {
					user_id: this.userId
				}, res => {})
			},
			getwindowInfo() {
				this.windowHeight = uni.getSystemInfoSync().windowHeight;
				this.windowWidth = uni.getSystemInfoSync().windowWidth;
			},
			closePhone() {
				this.sendMsg()
				this.$store.commit('setVideoChatUser', null)
				this.$store.commit('setVideoModalShow', false)
				uni.removeStorageSync('roomid');
				this.stopAudio()
			},
			answerPhone() {
				this.$store.commit('setVideoModalShow', false)
				this.stopAudio()
				uni.navigateTo({
					url: "/pages/videoChat/videoChat?isCurrent=0"
				})
			},
			sendMsg() {
				let message = this.tim.createCustomMessage({
					to: this.videoChatUser.id.toString(),
					conversationType: 'C2C',
					// 消息优先级，用于群聊（v2.4.2起支持）。如果某个群的消息超过了频率限制，后台会优先下发高优先级的消息，详细请参考：https://cloud.tencent.com/document/product/269/3663#.E6.B6.88.E6.81.AF.E4.BC.98.E5.85.88.E7.BA.A7.E4.B8.8E.E9.A2.91.E7.8E.87.E6.8E.A7.E5.88.B6)
					// 支持的枚举值：TIM.TYPES.MSG_PRIORITY_HIGH, TIM.TYPES.MSG_PRIORITY_NORMAL（默认）, TIM.TYPES.MSG_PRIORITY_LOW, TIM.TYPES.MSG_PRIORITY_LOWEST
					// priority: TIM.TYPES.MSG_PRIORITY_NORMAL,
					payload: {
						data: 'videoChatCancel', // 用于标识该消息类型
						description: 'voiceChatCancel', // 用于装载url
						extension: JSON.stringify(this.userInfo)
					}
				});
				this.tim.sendMessage(message);
			},
			stopAudio() {
				this.audio.pause();
				this.audio.stop();
				this.audio.destroy()
				this.audio = null
			}
		}
	}
</script>

<style lang="scss" scoped>
	.video_chat {
		position: fixed;
		overflow: hidden;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 100;
	}

	.bg {
		width: 100%;
		height: 100%;
	}

	.avater-box {
		width: 100%;
		position: fixed;
		top: 331rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 101;
		flex-direction: column;
	}

	.name {
		margin-top: 20upx;
		color: #FFFFFF;
		font-size: 52upx;
	}

	.avatar {
		background-color: rgb(177, 162, 187);
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
	}

	.leaveroom-content {
		z-index: 101;
		position: fixed;
		width: 100%;
		bottom: 224rpx;
		padding: 0 150upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.leaveroom-btn {
		height: 157rpx;
		width: 157rpx;
	}
</style>
